<!-- 用户 》 基础 -->

<template>
  <div>
    <MajorTitle title="基础信息" />

    <EasyRow>
      <div class="quar">
        <ShowName label="姓名" bind="name" word2 half />
        <ShowText bind="name" noLabel half />
      </div>
      <div class="eighth3">
        <ShowPhone label="手机" word2 half />
        <ShowText bind="phone" :labelWidth="10" half />
      </div>
      <div class="eighth3">
        <ShowGender label="性别" word2 :width="160">
          <template #default="{ text }">
            {{ text }}
            <i v-if="one.gender === 1" class="el-icon-male" />
            <i v-if="one.gender === 2" class="el-icon-female" />
          </template>
        </ShowGender>
        <ShowSlot :labelWidth="40" auto>
          <ShowNum label="年龄" bind="age" word2 auto />
          <ShowNum bind="age" :labelWidth="10" CN auto />
        </ShowSlot>
      </div>
    </EasyRow>

    <EasyRow>
      <div class="half inFlex">
        <ShowDict label="证件" bind="idType" :dict="CORE.DICT.ID_TYPE" word2 auto />
        <ShowIdNo bind="idNo" :labelWidth="10" auto />
        <ShowText bind="idNo" :labelWidth="10" class="flex1" />
      </div>

      <div class="half">
        <ShowDate label="生日" bind="birth" word2 auto />
        <ShowDate bind="birth" :labelWidth="10" CN auto />
      </div>
    </EasyRow>

    <ShowText label="地址" word2>
      {{ CORE.dict(CORE.DISTRICT.PROVINCE, one.province) }}
      {{ CORE.dict(CORE.DISTRICT.CITY, one.city) }}
      {{ CORE.dict(CORE.DISTRICT.AREA, one.area) }}
    </ShowText>

    <ShowText bind="addr" word2 />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'UserBasic',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 更新证件号码
     */
    changeIdNo(value) {
      const gender = value.charAt(17)
      this.one.gender = gender ? (gender % 2 ? 1 : 2) : 0
    },

    /**
     * 三要素校验
     */
    checkThree() {
      const valid = CORE.validPhone(this.one.phone) && CORE.validIdNo(this.one.idNo)
      if (valid) CORE.MSG.success('校验通过')
      else CORE.MSG.error('校验不通过')
    },
  },
}
</script>
